Skip to content

feat: animate active navbar pill#81

Merged
condyl merged 1 commit intomasterfrom
cb/animate-active-navbar-pill
Jan 21, 2026
Merged

feat: animate active navbar pill#81
condyl merged 1 commit intomasterfrom
cb/animate-active-navbar-pill

Conversation

@condyl
Copy link
Copy Markdown
Collaborator

@condyl condyl commented Jan 21, 2026

This pull request significantly enhances the NavbarComponent by introducing an animated indicator for the active navigation item on desktop, improving accessibility, and unifying link handling for both desktop and mobile navigation. The changes also clean up and modernize the codebase by leveraging React hooks and utility functions.

Navigation indicator and accessibility improvements:

  • Added an animated indicator bar that visually highlights the active navigation item on desktop, updating its position and size based on the current route and user interactions such as hover and focus. This uses new state and refs (indicatorStyle, desktopNavRef, desktopItemRefs) and updates on route changes, window resize, and navigation events.
  • Improved accessibility by setting aria-current="page" on the active navigation link and ensuring keyboard focus and mouse interactions update the indicator appropriately.

Navigation structure and code quality:

  • Unified link rendering for both mobile and desktop: all navigation items now use a single pattern for handling external links (target="_blank", rel="noopener noreferrer") and internal routing, reducing duplication and improving maintainability.
  • Refactored navigation logic to use a new isActiveRoute helper, supporting exact and partial route matching for active state detection.

@condyl condyl merged commit ea78120 into master Jan 21, 2026
3 checks passed
@condyl condyl deleted the cb/animate-active-navbar-pill branch January 21, 2026 02:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant